<template>
	<view class="mypage">
		<view class="e-container">
			<form @submit="formSubmit" class="login-form">	
					
					
				<view class="section" v-for="(item,index) in list" :class="inputIndex==index?'solid-bottom-blue':'' ">
					<view class="section-label flex justify-between">
						<view class="flex-sb">
							{{ index==0? '内网地址' : (index==1?'互联网地址': '服务器地址'+ (index+1) )  }}
							
						</view>
						<view class="text-red" @click="removeEvent(index)" v-if="(index==0 || index==1) ? false :true">
							<i class='dicon' style="font-size: 40upx;">&#xe937;</i>
						</view>
					</view>
					<input  
					:name="'ipnum'+ index" 
					type="text" @focus="setActive(index)"  
					:disabled="(index==0 || index==1) ? true :false "
					v-model="list[index]"  placeholder="请输入IP地址" 
					 />
				</view>
				<view class="btn-area" hover-class="e-hover-btn">
					<button formType="submit" class="login-btn" type="primary">保存</button>				
				</view>
			</form>
		</view>
		
		<!-- 悬浮按钮 -->
		<!-- <view class="next-btn-wrap" @click="addEvent">
			<button class="cu-btn cuIcon bg-blue lg shadow-blur big-btn">
				<text class="cuIcon-add text-bold"></text>
			</button>
		</view> -->
	</view>
	
</template>

<script>
	let _self;
	export default {
		data() {
			return {
				list:['61.133.208.158:81','192.168.101.53:81'],
				inputIndex:'',
			};
		},
		onNavigationBarButtonTap(e) {
			_self.list.push('');
		},
		onShow:function(){
			let that = this;
			uni.getStorage({
					key: 'ipListStr',
					success: function (res) {
							_self.list = JSON.parse(res.data);
					}
			});
			
		},	
		onLoad: function() {
			_self=this;
		},
		onNavigationBarButtonTap() {
			_self.list.push('')
		},
		methods:{
			setActive(i){
				console.log(i);
				_self.inputIndex = i 
			},
			// addEvent(){
			// 	_self.list.push('')
			// },
			removeEvent: function(e){
				//console.log(_self.list);
				if(_self.list.length == 1){
					uni.showToast({
						title: '请至少配置一个服务器地址。',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				_self.list.splice(e,1)
			},
			getValue:function(e,i){
				 let val = e.target.value;
				_self.list[i] = val;
				console.log(val);
			},
			formSubmit: function(e) {
				let ipList = e.detail.value ;
				let ipListStr = JSON.stringify(_self.list);
				// console.log(ipList);
				if(_self.list.length < 1){
					uni.showToast({
						title: '请至少配置一个服务器地址。',
						icon: 'none',
						duration: 1000
					});
					return;
				}else if(!ipList.ipnum0){
					return uni.showToast({
						title: '第一项配置不能为空',
						icon: 'none',
						duration: 1000
					});
				}
				uni.showLoading({})
				// console.log(ipListStr);

				uni.setStorage({
					key: 'ipListStr',
					data: ipListStr
				});
				
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					duration: 1000
				});
				setTimeout(function(){ 
					uni.navigateBack({ })
				}, 1200);
				
			}
		}
	}
</script>

<style scoped="">
	.section {
		margin: 40upx;
		border-bottom: 2upx solid #aaa;
	}
	.btn-area {
		margin: 60upx 40upx 0upx 40upx;
	}
	.next-btn-wrap{
		position: fixed;
		bottom: 40px;
		right: 20px;
	}
	.next-btn-wrap .cuIcon-add{
		font-size: 50upx;
	}
</style>
